<template>
  <div>
    <InstructionExtensionContent
      v-if="modalContentStack?.[stackFrame]?.type === 'browser'"
      :wallet="wallet"
      @refresh="() => emits('refresh')"
      @learn-more="() => emits('learnMore')"
    />
    <DownloadDetail
      v-if="modalContentStack?.[stackFrame]?.type === 'mobile'"
      :wallet="wallet"
      @continue="() => emits('continue')"
    />
    <InstructionDesktopContent
      v-if="modalContentStack?.[stackFrame]?.type === 'desktop'"
      :wallet="wallet"
      @connect="() => emits('connect')"
      @learn-more="() => emits('learnMore')"
    />
  </div>
</template>
<script setup lang="ts">
  import { inject } from 'vue'
  import type { WalletConnector } from '../../wallets/useWalletConnectors'
  import DownloadDetail from './DownloadDetail.vue'
  import InstructionExtensionContent from './InstructionExtensionContent.vue'
  import InstructionDesktopContent from './InstructionDesktopContent.vue'

  const props = withDefaults(
    defineProps<{
      uid: string
      stackFrame: number
      wallet: WalletConnector
    }>(),
    {}
  )
  const emits = defineEmits(['continue', 'refresh', 'learnMore', 'connect'])

  const modalContentStack: any = inject(props.uid)
</script>

<style lang="scss" scoped>
  button {
    cursor: pointer;
    padding: 4px 12px;
    transition: all 0.3s ease;
    border: none;
    background: #d9fc01;
    color: #1a1b1f;
    border-radius: 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.05em;
    line-height: 16px;
    &:hover {
      transform: scale(1.05);
    }
    &:active {
      transform: scale(0.95);
    }
  }
</style>
